<script setup>
  import { fetchData } from '@/api/index';
  import { ref, onMounted } from 'vue';
  import { useAbortController } from '@/hooks/abort-controller';
  const content1 = ref('')
  const content2 = ref('')
  const activeName = ref('')

  const sleep = (time) => {
    return new Promise((resolve) => setTimeout(resolve, time));
  };

const getData = async (type, signal) => {
  await sleep(1000)
  const { content = '' } = await fetchData(type, signal);
  return content
}

const { controller, abort } = useAbortController()

const handleClick = async (tab) => {
  try {
      // 取消上一次请求
      abort()
      content1.value = '加载中...'
      content2.value = '加载中...'
      const { signal } = controller.value
      const [res1, res2] = await Promise.all([getData(tab, signal), getData(tab, signal)])
      content1.value = res1
      content2.value = res2
    } catch (error) {
      console.info(error);
    }
 }

 onMounted(() => {
  activeName.value = 'hitokoto'
 })
 
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
    <el-tab-pane label="一言" name="hitokoto"></el-tab-pane>
    <el-tab-pane label="中英文" name="en"></el-tab-pane>
    <el-tab-pane label="社会语录" name="social"></el-tab-pane>
    <el-tab-pane label="毒鸡汤" name="soup"></el-tab-pane>
    <el-tab-pane label="彩虹屁" name="fart"></el-tab-pane>
    <el-tab-pane label="渣男语录" name="zha"></el-tab-pane>
  </el-tabs>
  <div class="content">
    <div>{{ activeName }}</div>
    <div>{{ content1 }}</div>
    <div>{{ content2 }}</div>
  </div>
</template>
